<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <h1>{{ msg }} {{ studentName }}</h1>
    <!-- 通过父组件给子组件传递函数类型props，实现子给父传数据 -->
    <School ref="sch" :getSchoolName="getSchoolName" @click.native="show" />
    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（写法一：使用 @ 或 v-on: ）,可加.once等修饰 -->
    <Student
      myName="siri"
      :myAge="18"
      mySex="female"
      v-on:atguigu="getStudentName"
      @demo="m1"
    />
    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（写法二：使用 ref + mounted） -->
    <!-- <Student myName="siri" :myAge="18" mySex="female" ref="student"></Student> -->
    <hr />
    <h1>1 - ref属性</h1>
    <h2 v-text="msg" ref="title"></h2>
    <button ref="btn" @click="showDOM">点我输出上方的DOM元素</button>
    <hr />
    <h1>2 - Vue中的动画效果</h1>
    <Carton />
    <hr />
    <h1>3 - 服务器代理</h1>
    <button @click="getStudents">点我从服务器获取学生信息</button>
    <button @click="getCars">点我从服务器获取汽车信息</button>
    <hr />
    <h1>4 - slot 插槽</h1>
    <div class="container">
      <Category title="美食">
        <a slot="footer" href="http://www.bilibili.com">更多美食</a>
      </Category>
      <Category title="游戏">
        <ul slot="center">
          <li v-for="(item, index) in games" :key="index">{{ item }}</li>
        </ul>
        <template slot="footer">
          <div class="foot">
            <a href="http://www.bilibili.com">单机游戏</a>
            <a href="http://www.bilibili.com">网络游戏</a>
          </div>
          <h4>大爷快来玩</h4>
        </template>
      </Category>
      <Category title="电影">
        <video
          slot="center"
          controls
          src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
        />
        <template slot="footer">
          <div class="foot">
            <a href="http://www.bilibili.com">经典</a>
            <a href="http://www.bilibili.com">热门</a>
            <a href="http://www.bilibili.com">分类</a>
          </div>
          <h4>快来康康好看的</h4>
        </template>
      </Category>
      <Category title="奶茶">
        <template slot-scope="{ drinks }">
          <span v-for="(drink, index) in drinks" :key="index">
            {{ drink }}
          </span>
        </template>
        <h3 slot="center">作用域插槽</h3>
      </Category>
    </div>
    <hr />
    <h1>5 - Vuex</h1>
    <Count />
    <Person />
    <hr />
    <h1>6 - Router</h1>
    <RouterDemo />
    <h1>Test</h1>
    <Band></Band>
  </div>
</template>

<script>
import School from './components/School'
import Student from './components/Student'
import Carton from './components/Carton'
import Category from './components/Category'
import Count from './components/Count'
import Person from './components/Person'
import RouterDemo from './components/RouterDemo.vue'

import axios from 'axios'
import Band from './components/Band.vue'

export default {
  name: 'App',
  components: {
    School,
    Student,
    Carton,
    Category,
    Count,
    Person,
    RouterDemo,
    Band,
  },
  data() {
    return {
      msg: '欢迎学习Vue！',
      studentName: '',
      foods: ['小龙虾', '烧烤', '牛排', '臭豆腐'],
      games: ['黑神话·悟空', '永劫无间', '原神', '崩坏 3'],
      films: ['《教父》', '《哈利波特》', '《指环王》', '《让子弹飞》'],
    }
  },
  methods: {
    showDOM() {
      console.log(this.$refs.title) //真实DOM元素
      console.log(this.$refs.btn) //真实DOM元素
      console.log(this.$refs.sch) //School组件的实例对象（vc）
    },
    getSchoolName(name) {
      console.log("I'm App, I receive SchoolName:", name, 'by props')
    },
    getStudentName(name, ...params) {
      console.log("I'm App, I receive StudentName:", name, 'by $emit', params)
      this.studentName = name
    },
    m1() {
      console.log('demo事件触发')
    },
    show() {
      alert('组件绑定原生DOM事件，通过native修饰')
    },
    getStudents() {
      axios.post('/api/login?username=saaSas&password=111@qqq', {}).then(
        (response) => {
          console.log('请求成功', response.data)
        },
        (error) => {
          console.log('请求失败', error.message)
        }
      )
    },
    getCars() {
      axios.get('http://localhost:8080/demo/cars').then(
        (response) => {
          console.log('请求成功', response.data)
        },
        (error) => {
          console.log('请求失败', error.message)
        }
      )
    },
  },
  mounted() {
    setTimeout(() => {
      // this.$refs.student.$on("atguigu", this.getStudentName); // 绑定自定义事件
      /* this.$refs.student.$once("atguigu", (name, ...params) => {
        console.log("I'm App, I receive StudentName:", name, "by $emit", params);
      this.studentName = name;
      }); // 绑定自定义事件（一次性）+ 箭头函数回调 */
    }, 3000)
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.container,
.foot {
  display: flex;
  justify-content: space-around;
}
video {
  width: 100%;
}
</style>
